<%@ page language="java" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="s" uri="http://www.springframework.org/tags" %>
<%@ page isELIgnored="false"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>山西煤炭现货公路交易系统客户端</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- Bootstrap 3.3.5 -->
<link rel="stylesheet" href="<s:url value="/resources"/>/adminlte/bootstrap/css/bootstrap.min.css">
<!-- daterange picker -->
<link rel="stylesheet" href="<s:url value="/resources"/>/adminlte/plugins/daterangepicker/daterangepicker-bs3.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="<s:url value="/resources"/>/adminlte/font-awesome/css/font-awesome.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="<s:url value="/resources"/>/adminlte/ionicons/css/ionicons.min.css">
<!-- jvectormap -->
<link rel="stylesheet" href="<s:url value="/resources"/>/adminlte/plugins/jvectormap/jquery-jvectormap-1.2.2.css">
<!-- Theme style -->
<link rel="stylesheet" href="<s:url value="/resources"/>/adminlte/dist/css/AdminLTE.min.css">
<link rel="stylesheet" href="<s:url value="/resources"/>/adminlte/dist/css/skins/_all-skins.min.css">
<!-- DataTables -->
<link rel="stylesheet" href="<s:url value="/resources"/>/adminlte/plugins/datatables/dataTables.bootstrap.css">
<!-- AdminLTE Skins. Choose a skin from the css/skins
     folder instead of downloading all of them to reduce the load. -->
<link rel="stylesheet" href="<s:url value="/resources"/>/adminlte/dist/css/skins/_all-skins.min.css">
<!-- jQuery 2.1.4 -->
<script src="<s:url value="/resources"/>/adminlte/plugins/jQuery/jQuery-2.1.4.min.js"></script>
<!-- Bootstrap 3.3.5 -->
<script src="<s:url value="/resources"/>/adminlte/bootstrap/js/bootstrap.min.js"></script>
<!-- AdminLTE App -->
<script src="<s:url value="/resources"/>/adminlte/dist/js/app.min.js"></script>
<!-- Select2 -->
<link rel="stylesheet" href="<s:url value="/resources"/>/adminlte/plugins/select2/select2.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="<s:url value="/resources"/>/adminlte/dist/css/AdminLTE.min.css">
<!-- date-range-picker -->
<script src="<s:url value="/resources"/>/adminlte/moment.min.js"></script>
<script src="<s:url value="/resources"/>/adminlte/plugins/daterangepicker/daterangepicker.js"></script>
<!-- DataTables -->
<script src="<s:url value="/resources"/>/adminlte/plugins/datatables/jquery.dataTables.min.js"></script>
<script src="<s:url value="/resources"/>/adminlte/plugins/datatables/dataTables.bootstrap.min.js"></script>
<!-- Select2 -->
<script src="<s:url value="/resources"/>/adminlte/plugins/select2/select2.full.min.js"></script>
<script src="<s:url value="/resources"/>/adminlte/plugins/select2/i18n/zh-CN.js"></script>
<!-- 引入 echarts.js -->
<script src="<s:url value="/resources"/>/echarts/echarts.min.js"></script>
<script src="<s:url value="/resources"/>/adminlte/default.js"></script>
<script src="<s:url value="/resources"/>/echarts/myechart/areaChart.js"></script>
<script src="<s:url value="/resources"/>/adminlte/default_logistical.js"></script>
<script src="<s:url value="/resources"/>/adminlte/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript">
	 $(function(){  
	   // loadUserInfo();
	    
	    dataTab("dataTab",false,false,false,true,true,false,"<s:url value="/resources"/>/adminlte/dataTabBootstrapCN.json");
	     
	    loadMenu("${user.roleType}","${menuid}",${menuList});
	    //areaChart();
	    getSelOpts("<s:url value="/"/>/logistical/getSelOpts","selPorts","ports","daoJ");
	    getSelOpts("<s:url value="/"/>/logistical/getSelOpts","selFajs","fajs","faJDao");
	    /* areaChart1(${pieShoulist},"需求车数","${dateRange}","areaChart");
	    areaChart1(${pieWanlist},"完成车数","${dateRange}","areaChart1");
 */	    //lineChart(${pielist},"需求吨数","${dateRange}",${linelist},${lineX});
	    $(".select2").select2();
	    switchtab(${linelist2},"${dateRange}",${pielist2},${lineX});
	    //areaChart1(${pielist2},"","${dateRange}");
	    document.getElementById("activeValue").value = "2";
	 });
	 function clickSum(){
		 if(validateDay("2")){
			 document.getElementById("form").submit();
		 }
	 }
	 
</script>
</head>
<body class="skin-blue sidebar-mini">
<input type="hidden" id="activeValue" name="activeValue"/>
<div class="wrapper">
<%@ include file="../../header.jsp" %>
<%@ include file="../../sidebar.jsp" %>
<div class="content-wrapper" >
      <div class="content-header" >
        <h1> 物流分析<small>按到局分析</small></h1>
        <ol class="breadcrumb">
          <li><a href="<s:url value="/"/>/index.jsp"><i class="fa fa-dashboard"></i>首页</a></li>
          <li><a href="#" id="location1"></a></li>
          <li class="active" id="location2"></li>
        </ol>
      </div>
        <!-- Main content -->
        <div class="content">
         <!-- 查询条件 -->
         <form id="form" action="<s:url value="/"/>/logistical/daoJFX" method="post">
         <input type="hidden" value='${selPorts}' name="selPorts" id ="selPorts"/>
         <input type="hidden" value='${selFajs}' name="selFajs" id ="selFajs"/>
          <div class="box box-default">
            <div class="box-header with-border">
              <h3 class="box-title">查询条件</h3>
              <div class="box-tools pull-right">
                <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
              </div>
            </div><!-- /.box-header -->
            <div class="box-body">
              <div class="row">
                 <div class="col-md-4">
                  <div class="form-group">
                    <label>选择发局</label>
                  	<select class="form-control select2" style="width: 100%;"  id="fajs" name="fajs"  data-placeholder="请选择发局" >
                    </select>
                  </div><!-- /.form-group -->
                </div><!-- /.col -->
              	<div class="col-md-4">
                  <div class="form-group">
                    <label>选择到局</label>
                    <select id="ports" name="ports" class="form-control select2" multiple="multiple" data-placeholder="请选择到局" style="width: 100%;">
                  	</select>
                  </div><!-- /.form-group -->
                </div><!-- /.col -->
                <div class="col-md-4">
                 <!-- Date range -->
                 <div class="form-group">
                    <label>日期范围:</label>
                    <div class="input-group">
                    <div class="input-group-addon">
                        <i class="fa fa-calendar"></i>
                      </div>
                      <input type="text" style="width:30%;padding-left: 17px;height: 32px;border: 1px solid #d2d6de;"  class="" id="startDate" name="startDate" value="${startDate}" onfocus="WdatePicker({dateFmt:'yyyy-MM'})">
                      &nbsp;&nbsp;--&nbsp;&nbsp;<input type="text" style="width:30%;;padding-left: 27px;height: 32px;border: 1px solid #d2d6de;" class="" id="endDate" name="endDate" value="${endDate}" onfocus="WdatePicker({dateFmt:'yyyy-MM'})">
                    &nbsp;&nbsp;&nbsp;
                    </div><!-- /.input group -->
                    </div>
                  <div class="form-group">
                      <button class="btn btn-primary"  type="button" onclick="clickSum()">查询</button>
                  </div>
               </div>
              </div><!-- /.row -->
            </div><!-- /.box-body -->
          </div><!-- /.box -->
          </form>
        <!-- 数据图 start-->
        <div class="row">
        <div class="col-lg-12 connectedSortable">
              <!-- Custom tabs (Charts with tabs)-->
              <div class="nav-tabs-custom">
                <!-- Tabs within a box -->
                <ul class="nav nav-tabs pull-right">
                  <li class="active"><a href="#chart1" data-toggle="tab" onclick="activeSub('2')">需求吨数</a></li>
                  <li><a href="#chart1" data-toggle="tab" onclick="activeSub('1')">需求车数</a></li>
                  <li><a href="#chart1" data-toggle="tab" onclick="activeSub('4')">受理吨数</a></li>
                  <li><a href="#chart1" data-toggle="tab" onclick="activeSub('3')">受理车数</a></li>
                  <li><a href="#chart1" data-toggle="tab" onclick="activeSub('6')">完成吨数</a></li>
                  <li><a href="#chart1" data-toggle="tab" onclick="activeSub('5')">完成车数</a></li>
                  <li class="pull-left header"><i class="fa fa-inbox"></i>各到局占比图及柱状图</li>
                </ul>
                <div class="tab-content no-padding">
                  <!-- Morris chart - Sales -->
                  <div class="chart tab-pane active" id="chart1" style="position: relative; height: 300px;">
			           <!-- AREA CHART -->
			           <div class="box-body">
			             <div class="chart" style="float: left;width:50%">
		                     <div id="lineChart" style="height:250px;"></div>
		                  </div>
			             <div class="chart" style="float: left;width:50%">
			               <div id="areaChart" style="height:250px;"></div>
			             </div>
			          </div><!-- /.box-body -->
			         <!-- DONUT CHART -->
		
		              <!-- BAR CHART -->
                  </div>
                  
                </div>
              </div><!-- /.nav-tabs-custom -->
            </div><!-- /.Left col -->
            <div class="col-md-6">
            </div><!-- /.col (LEFT) -->
            <div class="col-md-6">
            </div><!-- /.col (RIGHT) -->
          </div><!-- /.row -->
        
        
        <!-- 数据图 end -->
        <div class="box">
                <div class="box-header">
                  <h3 class="box-title">数据表(注：车数以辆为单位，吨数以万吨为单位)</h3>
                  <div class="box-tools pull-right">
                <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                <!-- <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-remove"></i></button> -->
              </div>
                </div><!-- /.box-header -->
                <div class="box-body">
                  <table id="dataTab"  class="table table-bordered table-hover">
	                  <c:if test="${disFlg eq '0'}">
	                  	<thead>
		                    <c:forEach items="${tabSumList}" var="li">
		                      	 <tr>
		                        	<th>总计</th>
		                        	<th>${li.xuqcs}</th>
		                        	<th>${li.xuqds}</th>
		                        	<th>${li.shoulcs}</th>
		                        	<th>${li.shoulds}</th>
		                        	<th>${li.wanccs}</th>
		                        	<th>${li.wancds}</th>
		                        	<th></th>
		                        	<th></th>
		                        </tr>
		                      </c:forEach>
		                      <tr>
		                        <th>到局</th>
		                        <th>需求车数</th>
		                        <th>需求吨数</th>
		                        <th>受理车数</th>
		                        <th>受理吨数</th>
		                        <th>完成车数</th>
		                        <th>完成吨数</th>
		                        <th>完成车数同比</th>
		                        <th>完成车数环比</th>
		                      </tr>
                    	</thead>
                    	<tbody>
	                      <c:forEach items="${tablist}" var="li">
	                      	 <tr>
	                        	<td>${li.typename}</td>
	                        	<td>${li.xuqcs}</td>
	                        	<td>${li.xuqds}</td>
	                        	<td>${li.shoulcs}</td>
	                        	<td>${li.shoulds}</td>
	                        	<td>${li.wanccs}</td>
	                        	<td>${li.wancds}</td>
	                        	<td>
	                        	<c:if test="${li.tb lt 0.00}">
		                        		<font color="green">${li.tb}%</font>
		                        	</c:if>
		                        	<c:if test="${li.tb ge 0.00}">
		                        		<font color="red">${li.tb}%</font>
		                        	</c:if>
		                        </td>
		                        <td>
		                        	<c:if test="${li.hb lt 0.00}">
		                        		<font color="green">${li.hb}%</font>
		                        	</c:if>
		                        	<c:if test="${li.hb ge 0.00}">
		                        		<font color="red">${li.hb}%</font>
		                        	</c:if>
		                        	<c:if test="${li.hb eq null}">
		                        		<font color="red"></font>
		                        	</c:if>
		                        	</td>
	                        </tr>
	                      </c:forEach>
                    	</tbody>
	                  </c:if>
	                  <c:if test="${disFlg eq '1'}">
		                  	<thead>
			                    <c:forEach items="${tabSumList}" var="li">
			                      	 <tr>
			                        	<th>合计</th>
			                        	<th>${li.xuqcs}</th>
			                        	<th></th>
			                        	<th>${li.xuqds}</th>
			                        	<th></th>
			                        	<th>${li.shoulcs}</th>
			                        	<th></th>
			                        	<th>${li.shoulds}</th>
			                        	<th></th>
			                        	<th>${li.wanccs}</th>
			                        	<th></th>
			                        	<th>${li.wancds}</th>
			                        	<th></th>
			                        	<th></th>
			                        	<th></th>
			                        	<th></th>
			                        </tr>
			                      </c:forEach>
			                      <tr>
			                        <th>到局</th>
			                        <th>需求车数</th>
			                        <th>需求车数占比</th>
			                        <th>需求吨数</th>
			                        <th>需求吨数占比</th>
			                        <th>受理车数</th>
			                        <th>受理车数占比</th>
			                        <th>受理吨数</th>
			                        <th>受理吨数占比</th>
			                        <th>完成车数</th>
			                        <th>完成车数占比</th>
			                        <th>完成吨数</th>
			                        <th>完成吨数占比	</th>
			                        <th>兑现率</th>
			                        <th>完成车数同比</th>
		                            <th>完成车数环比</th>
			                      </tr>
	                    	</thead>
		                    <tbody>
		                      <c:forEach items="${tablist}" var="li">
		                      	 <tr>
		                        	<td>${li.typename}</td>
		                        	<td>${li.xuqcs}</td>
		                        	<td>${li.xuqcszb}%</td>
		                        	<td>${li.xuqds}</td>
		                        	<td>${li.xuqdszb}%</td>
		                        	<td>${li.shoulcs}</td>
		                        	<td>${li.shoulcszb}%</td>
		                        	<td>${li.shoulds}</td>
		                        	<td>${li.shouldszb}%</td>
		                        	<td>${li.wanccs}</td>
		                        	<td>${li.wanccszb}%</td>
		                        	<td>${li.wancds}</td>
		                        	<td>${li.wancdszb}%</td>
		                        	<td>${li.duixl}</td>
		                        	<c:if test="${li.tb lt 0.00}">
		                        		<td><font color="green">${li.tb}%</font></td>
		                        	</c:if>
		                        	<c:if test="${li.tb ge 0.00}">
		                        		<td><font color="red">${li.tb}%</font></td>
		                        	</c:if>
		                        	<c:if test="${li.hb lt 0.00}">
		                        		<td><font color="green">${li.hb}%</font></td>
		                        	</c:if>
		                        	<c:if test="${li.hb ge 0.00}">
		                        		<td><font color="red">${li.hb}%</font></td>
		                        	</c:if>
		                        </tr>
		                      </c:forEach>
		                    </tbody>
	                  </c:if>
                  </table>
                </div><!-- /.box-body -->
              </div><!-- /.box -->
        </div><!-- /.content -->
      </div><!-- /.content-wrapper -->
</div> 

</body>
<script type="text/javascript">
//点击饼图触发拆线图
	 function changLine(param){
	 	var type = document.getElementById("activeValue").value;
	 	if(param.data.selected){
		 	if(type == "2"){
		 		lineChart(${pielist2},"","${dateRange}",${linelist2},${lineX},param.name,"lineChart");
		 	}else if(type == "1"){
		 		lineChart(${pielist1},"","${dateRange}",${linelist1},${lineX},param.name,"lineChart");
		 	}else if(type == "4"){
		 		lineChart(${pielist4},"","${dateRange}",${linelist4},${lineX},param.name,"lineChart");
		 	}else if(type == "3"){
		 		lineChart(${pielist3},"","${dateRange}",${linelist3},${lineX},param.name,"lineChart");
		 	}else if(type == "6"){
		 		lineChart(${pielist6},"","${dateRange}",${linelist6},${lineX},param.name,"lineChart");
		 	}else if(type == "5"){
		 		lineChart(${pielist5},"","${dateRange}",${linelist5},${lineX},param.name,"lineChart");
		 	}
	 	}else{
	 		if(type == "2"){
		 		lineChart(${pielist2},"","${dateRange}",${linelist2},${lineX},"1","lineChart");
		 	}else if(type == "1"){
		 		lineChart(${pielist1},"","${dateRange}",${linelist1},${lineX},"1","lineChart");
		 	}else if(type == "4"){
		 		lineChart(${pielist4},"","${dateRange}",${linelist4},${lineX},"1","lineChart");
		 	}else if(type == "3"){
		 		lineChart(${pielist3},"","${dateRange}",${linelist3},${lineX},"1","lineChart");
		 	}else if(type == "6"){
		 		lineChart(${pielist6},"","${dateRange}",${linelist6},${lineX},"1","lineChart");
		 	}else if(type == "5"){
		 		lineChart(${pielist5},"","${dateRange}",${linelist5},${lineX},"1","lineChart");
		 	}
	 	}
	 }
	 //初始饼图与拆线图
	 function activeSub(type){
	 	 document.getElementById("activeValue").value = type;
	 	 if(type == "2"){
	 		switchtab(${linelist2},"${dateRange}",${pielist2},${lineX});
	 	}else if(type == "1"){
	 		switchtab(${linelist1},"${dateRange}",${pielist1},${lineX})
	 	}else if(type == "4"){
	 		switchtab(${linelist4},"${dateRange}",${pielist4},${lineX})
	 	}else if(type == "3"){
	 		switchtab(${linelist3},"${dateRange}",${pielist3},${lineX})
	 	}else if(type == "6"){
	 		switchtab(${linelist6},"${dateRange}",${pielist6},${lineX})
	 	}else if(type == "5"){
	 		switchtab(${linelist5},"${dateRange}",${pielist5},${lineX})
	 	}
	 }
	 
</script>
</html>
